<template>
  <el-row :gutter="26" class="course-list">
    <el-col :span="6" v-for="(item, index) in courseList" :key="index">
      <div class="item">
        <EduCourseImage
          :image="item.cover_url"
          :courseType="item.course_type"
          :promotionType="item.promotion_type"
          :height="imgageHeight"
          lazy
          @click="handleAdvance(item)"
        ></EduCourseImage>
        <div class="desc">
          <div class="title" @click="handleAdvance(item)">{{ item.title }}</div>
          <el-row type="flex" align="middle" justify="space-between">
            <div class="count">{{ item.sale_count }}人在学</div>
            <el-row type="flex" align="middle">
              <template v-if="scribingPrice && $util.isDef(item.scribing_price)">
                <span class="scribing-price" v-if="item.scribing_price > 0">{{
                  item.scribing_price | formatMoney
                }}</span>
              </template>
              <span class="free" v-if="$util.isDef(item.is_buy) && item.is_buy == 1">已购买</span>
              <template v-else>
                <span class="price" v-if="item.price > 0">{{ item.price | formatMoney }}</span>
                <span class="free" v-else>免费</span>
              </template>
            </el-row>
          </el-row>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import EduCourseImage from '@/components/EduCourseImage'
export default {
  components: {
    EduCourseImage
  },
  props: {
    courseList: {
      type: Array
    },
    scribingPrice: {
      type: Boolean,
      default: true
    },
    imgageHeight: {
      type: String,
      default: '155px'
    }
  },
  methods: {
    handleAdvance(item) {
      this.$emit('next', item)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/hover.scss';
.course-list {
  .item {
    margin-bottom: 30px;
    border-radius: 6px;
    overflow: hidden;
    background-color: #fff;
    @include prefixed(transition-duration, 0.3s);
    &:hover {
      box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.3);
      transform: translateY(-5px);
    }
    .desc {
      padding: 10px 10px 20px;
      .title {
        font-size: 16px;
        color: $text-color-import;
        margin-bottom: 18px;
        cursor: pointer;
        @include ellipsis();
      }
      .count {
        font-size: 12px;
        color: $text-color-auxiliary;
      }
      .price {
        font-size: 16px;
        color: $text-color-price;
      }
      .free {
        font-size: 16px;
        color: $text-color-free;
      }
      .vip-price {
        font-size: 12px;
        color: $text-color-other;
      }
      .scribing-price {
        font-size: 12px;
        color: $text-color-auxiliary;
        text-decoration: line-through;
      }
    }
  }
}
</style>
